<template>
    <div class="act-items">
        <div class="act-item" v-for="(item, index) in list" :key="index">
            <div :style="'background-image:' + 'url(' + item.img_url + ')'" class="child-img" @click="toDetail(item.id)">
                <div class="bottom-txt mark-bg">
                    <div class="left-part">
                        <p>{{item.title}}</p>
                        <!--<p>{{item.title2}}</p>-->
                    </div>
                   <div class="right-part">
                       <span class="detail" @click="toDetail(item.id)">查看详情</span>
                       <p style="margin-top:5px;"><span>活动时间：</span>{{item.start_date | formatDate}}-{{item.end_date | formatDate}}</p>
                   </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatTimeToStr } from '../common/js/date'
export default {
  name: 'actItem',
  props: {
    list: {}
  },
  filters: {
    formatDate (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy年MM月dd日')
      } else {
        return ''
      }
    }
  },
  methods: {
    toDetail (id) {
      this.$emit('toDetail', id)
    }
  }
}
</script>
<style>
    .act-items{
        width: 100%;
        height: auto;
    }
    .act-item{
        width: 96%;
        height: 200px;
        margin: 0 2% 2%;
    }
    .child-img{
        width: 100%;
        height: 100%;
        background-position: center center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        border-radius: 8px;
        position: relative;
    }
    .bottom-txt{
        position: absolute;
        bottom: 0;
        padding: 5px;
        width: 100%;
        color: #fff;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(to top,rgba(55,55,55,.2),rgba(55,55,55,0));
    }
    .bottom-txt .left-part{
        float: left;
        text-align: left;
        font-size: 18px;
    }
    .bottom-txt .left-part p{
        width: 58%;
    }
    .bottom-txt .right-part{
        font-size: 10px;
        float: right;
        text-align: right;
        position: absolute;
        bottom: 5px;
        right: 5px;
    }
    .bottom-txt .detail{
        padding: 3px 9px;
        border: 1px solid #fff;
    }
</style>
